<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 表单
                </el-breadcrumb-item>
                <el-breadcrumb-item>基本表单</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px">
                    <!-- <el-form-item label="表单名称">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="选择器">
                        <el-select v-model="form.region" placeholder="请选择">
                            <el-option key="bbk" label="步步高" value="bbk"></el-option>
                            <el-option key="xtc" label="小天才" value="xtc"></el-option>
                            <el-option key="imoo" label="imoo" value="imoo"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="日期时间">
                        <el-col :span="11">
                            <el-date-picker
                                type="date"
                                placeholder="选择日期"
                                v-model="form.date1"
                                style="width: 100%;"
                            ></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-time-picker
                                placeholder="选择时间"
                                v-model="form.date2"
                                style="width: 100%;"
                            ></el-time-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item label="城市级联">
                        <el-cascader :options="options" v-model="form.options"></el-cascader>
                    </el-form-item>
                    <el-form-item label="选择开关">
                        <el-switch v-model="form.delivery"></el-switch>
                    </el-form-item>
                    <el-form-item label="多选框">
                        <el-checkbox-group v-model="form.type">
                            <el-checkbox label="步步高" name="type"></el-checkbox>
                            <el-checkbox label="小天才" name="type"></el-checkbox>
                            <el-checkbox label="imoo" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="单选框">
                        <el-radio-group v-model="form.resource">
                            <el-radio label="步步高"></el-radio>
                            <el-radio label="小天才"></el-radio>
                            <el-radio label="imoo"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="文本框">
                        <el-input type="textarea" rows="5" v-model="form.desc"></el-input>
                    </el-form-item> -->

                    <el-form-item label="活动类型名" prop="activity_type_name">
                        <el-select v-model="form.activity_type_name" placeholder="请选择活动类型名">
                        <el-option label="公益" value="公益" ></el-option>
                        <el-option label="辩论赛" value="辩论赛"></el-option>
                        <el-option label="讲座" value="讲座"></el-option>
                        <el-option label="体育竞赛" value="体育竞赛"></el-option>
                        <el-option label="宣传" value="宣传" ></el-option>
                        <el-option label="影视" value="影视"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="活动名字" >
                        <el-input v-model="form.activity_name" ></el-input>
                    </el-form-item>
                    <el-form-item label="活动描述" prop="activity_description">
                        <el-input v-model="form.activity_description" ></el-input>
                    </el-form-item>
                    <el-form-item label="活动开始时间" prop="activity_start_time">
                        <el-input v-model="form.activity_start_time"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="活动结束时间" prop="activity_end_time">
                        <el-input v-model="form.activity_end_time"></el-input>
                    </el-form-item> -->
                    <el-form-item label="活动结束时间">
                    <el-date-picker
                        v-model="form.activity_end_time"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择时间" @change="dateFormat(form.activity_end_time)">
                        </el-date-picker>
                    </el-form-item>
                    
                    <el-form-item label="活动报名开始时间" prop="signup_start_time">
                        <el-input v-model="form.signup_start_time" ></el-input>
                    </el-form-item>
                    <el-form-item label="活动报名结束时间" prop="signup_end_time">
                        <el-input v-model="form.signup_end_time"></el-input>
                    </el-form-item>
                    <el-form-item label="活动地点x坐标" prop="x_coordinate">
                        <el-input v-model="form.x_coordinate"></el-input>
                    </el-form-item>
                    <el-form-item label="活动地点y坐标" prop="y_coordinate">
                        <el-input v-model="form.y_coordinate"></el-input>
                    </el-form-item>
                    <el-form-item label="活动地点" prop="activity_place">
                        <el-input v-model="form.activity_place"></el-input>
                    </el-form-item>
                    <el-form-item label="时间年" prop="times">
                        <el-input v-model="form.times"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">表单提交</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import { addactivityinfo } from "../api/index";

export default {
    name: 'addactivityinfo',
    data() {
        return {
           
            form: {
                activity_type_name:'',
                activity_name: '',
                activity_description:'',
                activity_start_time: '',
                activity_end_time: '',
                signup_start_time: '',
                signup_end_time: '',
                x_coordinate: '',
                y_coordinate: '',
                activity_place: '',
                times:''
            },
            pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        };
    },
    methods: {
         dateFormat(dateData) {
             //https://www.cnblogs.com/Amerys/p/14522793.html?ivk_sa=1024320u
        // let date = new Date(dateData)
        // let y = date.getFullYear()
        // let m = date.getMonth() + 1
        // m = m < 10 ? ('0' + m) : m
        // let d = date.getDate()
        // d = d < 10 ? ('0' + d) : d
        // const time = y + '-' + m + '-' + d
        // return time
          let date = new Date(dateData);
         let YY = date.getFullYear() + '-';
         let MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
         let DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
         let hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
         let mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
         let ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
         return YY + MM + DD + " " + hh + mm + ss;
        },
        onSubmit() {
            this.form.activity_end_time=this.dateFormat(this.form.activity_end_time)
             addactivityinfo(this.form).then(res=>{
               // console.log(res);
              if(res.data.msg=='活动添加成功'){
                  this.$alert('添加成功！', '消息', {
          confirmButtonText: '确定',
          //https://blog.csdn.net/qq_44936079/article/details/108922565
          callback: action => { // eslint-disable-line no-unused-vars
               this.$router.push('/activityinfo')
          }  
        });
          }
          
      
            })
            // this.$message.success('提交成功！');
            // console.log(this.form.activity_end_time)
        },
       

    }
};
</script>